<template>
  <view class="user-index wrapper" @click="ClickCheckLoginIn">
    <!-- 用户信息展示 -->
    <view class="user-index__info-box flex">
      <view class="user-index__info flex">
        <!-- 用户头像 -->
        <image :src="userInfo.avatar" mode="aspectFill" class="user-index__info-avatar"></image>

        <view class="user-index__info-desc flex-column">
          <text class="user-index__info-nickname">昵称：{{userInfo.nickName}}</text>
          <text class="user-index__info-account">GF账号：{{userInfo.account}}</text>
          <text class="user-index__info-phone">手机号：{{userInfo.phoneNumber}}</text>
        </view>
      </view>

      <!-- 未认证 -->
      <block v-if="isLoggedIn">
        <view class="user-index__info-auth flex">
          <text class="user-index__info-auth-text">{{userInfo.real_state_name}}</text>
          <image src="/static/more--white.png" mode="aspectFill" class="user-index__info-auth-img"></image>
        </view>
      </block>
    </view>

    <block v-if="isLoggedIn">
      <!-- 用户的奖励 积分 -->
      <view class="user-index__rewards flex">
        <view class="user-index__rewards-item flex-column"
              v-for="item in userRewards"
              :key="item.id"
        >
          <text class="user-index__rewards-item-count">{{item.count}}</text>
          <text class="user-index__rewards-item-title">{{item.title}}</text>
        </view>
      </view>
      <!-- 我的订单 -->
      <view class="user-index__order">
        <userOptions
            :module-item="userOrder"
        ></userOptions>
      </view>
      <!-- 入驻绑定 -->
      <view class="user-index__settle">
        <userOptions
            :module-item="userSettle"
            :is-settle="true"
        ></userOptions>
      </view>
      <!-- 我的服务 -->
      <view class="user-index__service">
        <userOptions
            :module-item="userService"
        ></userOptions>
      </view>
    </block>
    <block v-else>
      <text>请先登录</text>
    </block>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onHide, onShow } from '@dcloudio/uni-app';
import userOptions from '@/components/userOptions/userOptions.vue';

// 全局状态globalData
import { storeToRefs } from "pinia";
import { useGlobalDataStore } from "@/globalData.js"
const { globalData } = storeToRefs(useGlobalDataStore());

const isLoggedIn = ref(false); // 使用ref创建响应式变量来存储登录状态
onShow(() => {
  isLoggedIn.value = globalData.value.isLoggedIn;
  userInfo.value = globalData.value.USER_INFO;
});

const userInfo =ref({})

const userRewards = ref([
  {count:'0',title:'积分',id:'reward01'},
  {count:'0',title:'体育豆',id:'reward01'},
  {count:'0',title:'卡劵',id:'reward01'},
  {count:'1',title:'足迹',id:'reward01'}
])

const userOrder = ref({
  title:'我的订单',
  data:[
    {icon:'/static/waitPay.png',text:'待支付',id:'order01'},
    {icon:'/static/waitPay.png',text:'已支付',id:'order01'},
    {icon:'/static/waitPay.png',text:'退款',id:'order01'},
    {icon:'/static/waitPay.png',text:'全部订单',id:'order01'}
  ]
})

const userSettle = ref({
  title:'入驻绑定',
  data:[
    {icon:'/static/serviceOrganization.png',text:'服务机构',id:'settle01'},
    {icon:'/static/server.png',text:'服务者',id:'settle02'},
    {icon:'/static/member.png',text:'成员',id:'settle03'},
    {icon:'/static/student.png',text:'学员',id:'settle04'},
  ]
})

const userService = ref({
  title:'我的服务',
  data:[
    {icon:'/static/Dragon-Tiger_rank.png',text:'龙虎等级',id:'service01'},
    {icon:'/static/my_competitions.png',text:'我的赛事',id:'service02'},
    {icon:'/static/my_activities.png',text:'我的活动',id:'service03'},
    {icon:'/static/my_training.png',text:'我的培训',id:'service04'},
    {icon:'/static/my_courses.png',text:'我的课程',id:'service05'},
    {icon:'/static/my_live_broadcasts.png',text:'我的直播',id:'service06'},
    {icon:'/static/my_videos.png',text:'我的视频',id:'service07'},
    {icon:'/static/my_reservations.png',text:'我的预定',id:'service08'},
    {icon:'/static/my_shopping.png',text:'我的购物',id:'service09'},
    {icon:'/static/sports_events.png',text:'体育项目',id:'service10'},
    {icon:'/static/customer_service_center.png',text:'客服等级',id:'service11'},
    {icon:'/static/invoice.png',text:'发票',id:'service12'},
    {icon:'/static/address.png',text:'地址',id:'service13'},
    {icon:'/static/settings.png',text:'设置',id:'service14'},
  ]
})

const ClickCheckLoginIn = () => {
  console.log('isLoggedIn: ', isLoggedIn.value,userInfo.value);
  if (!isLoggedIn.value) {
    uni.navigateTo({
      url: '/pages/login/login'
    });
  }
}
</script>

<style lang="scss" scoped>
.flex{
  display: flex;
  align-items: center;
}

.flex-column{
  display: flex;
  flex-direction: column;
}

.wrapper{
  box-sizing: border-box;
  padding: 0 25rpx;
}

// 统一优先margin-bottom这个方向
.user-index{
  width: 100%;
  // height: 100%;
  background-image: linear-gradient(to bottom,#ff9935 0%,#f3f3f3 60%,#f3f3f3 100%);
  padding-top: 100rpx;
  padding-bottom: 20rpx;

  // 用户信息模块
  &__info-box{
    width: 100%;
    height: 160rpx;
    justify-content: space-between;
    margin-bottom: 40rpx;
  }

  &__info{
    &-avatar{
      width: 160rpx;
      height: 160rpx;
      margin-right: 20rpx;
    }

    &-desc{
      color: #fff;
      font-size: 32rpx;
    }

    &-nickname{
      font-size: 35rpx;
      margin-bottom: .3em;
    }

    &-account{
      margin-bottom: .3em;
    }

    // 未认证
    &-auth{
      color: #fff;
      &-text{

      }

      &-img{
        width: 40rpx;
        height: 40rpx;
      }
    }
  }

  // 用户奖励模块
  &__rewards{
    width: 100%;
    background-color: #fff;
    justify-content: space-around;
    border-radius: 10px;
    height: 120rpx;
    margin-bottom: 40rpx;
    &-item{
      text-align: center;
      font-size: 28rpx;
      &-count{
        color: #cd9751;
      }
    }
  }

  // 我的订单
  &__order{
    margin-bottom: 20rpx;
  }

  // 入驻绑定
  &__settle{
    margin-bottom: 20rpx;
  }

  // 我的服务
  &__service{
    margin-bottom: 20rpx;
  }

}
</style>
